---
sidebar_position: 3
---

import BrowserWindow from '@site/src/theme/BrowserWindow';
import CodeSandboxButton from '@theme/CodeSandboxButton';

# 📦 theme-codesandbox-button

A Docusaurus theme component that displays a button to create/open a CodeSandbox project.

## Configuration

Install the theme

```bash npm2yarn
npm install @rise4fun/docusaurus-theme-codesandbox-button
```

Add the theme to your theme list.

```js
const config = {
    themeConfig: {
        ...
        // highlight-start
        codeSandbox: {
            templates: {
                node18: {
                    files: {
                        "package.json": {
                            content: {
                                dependencies: {},
                            },
                        },
                        "sandbox.config.json": {
                            content: {
                                template: "node",
                                container: {
                                    node: "18",
                                },
                            },
                        },
                    },
                },
            },
            defaultTemplate: "node18"
        }
        // highlight-end
    }
    plugins: [
        // highlight-start
        "@rise4fun/docusaurus-theme-codesandbox-button"
        // highlight-end
    ]
}
```

## Usage

In a MDX page, first add the import on top of the page.

```tsx
import CodeSandboxButton from '@theme/CodeSandboxButton';
```

Then insert the button in the page. The `files` argument is documented in the [CodeSandbox define API docs](https://codesandbox.io/docs/learn/getting-started/your-first-sandbox#define-api).

```tsx
<CodeSandboxButton
  startFile="main.ts"
  template="node18"
  files={{
    'main.ts': {
      content: "console.log('hello')",
    },
  }}
/>
```

Here is the button in action.

<BrowserWindow>

<CodeSandboxButton
  startFile="main.ts"
  template="node18"
  files={{
    'main.ts': {
      content: "console.log('hello')",
    },
  }}
/>

</BrowserWindow>
